<template>
  <div class="UploadFile-container">
    <template v-if="!detailed">
      <el-button
        size="small"
        icon="el-icon-upload"
        @click="uploadFile"
        :disabled="disabled"
        v-if="showUpload"
      >
        {{ buttonText }}
      </el-button>
      <el-button
        size="small"
        icon="el-icon-upload"
        @click="createPDF"
        v-if="showPdfBtn"
        :loading="gaopaiLoading"
      >
        通过高拍仪上传
      </el-button>
      <div class="el-upload__tip" v-if="showTip">
        只能上传不超过{{ fileSize }}{{ sizeUnit }}的{{ acceptText }}文件
      </div>
      <div class="el-upload__tip" v-if="showMessage">
        {{
          `文件大小不超过${fileSize}MB,支持扩展名: .rar .zip .doc .docx .pdf jpg...`
        }}
      </div>
    </template>

    <template v-if="fileList.length">
      <ul class="el-upload-list el-upload-list el-upload-list--text">
        <li
          class="el-upload-list__item is-success"
          v-for="(file, index) in fileList"
          :key="file.fileId"
          :class="{ 'el-upload-list__item_detail': detailed }"
        >
          <a
            class="el-upload-list__item-name"
            @click="showUploadBtn ? handlePreview(file, index) : ''"
          >
            <i :style="{ color: controlColor }" class="el-icon-paperclip"></i
            >{{ file.name }}
          </a>
          <i
            :style="{ color: controlColor }"
            class="el-icon-view"
            @click="handlePreview(file, index)"
          ></i>
          <i
            :style="{ color: controlColor }"
            class="el-icon-download"
            @click="handleClick(file)"
          ></i>
          <label
            class="el-upload-list__item-status-label"
            :class="{ disabled: disabled }"
          >
            <i class="el-icon-upload-success el-icon-circle-check"></i>
          </label>
          <i
            class="el-icon-close"
            v-if="!disabled && showUploadBtn"
            @click="handleRemove(index)"
          ></i>
        </li>
      </ul>
    </template>
    <fileUploader
      ref="fileUploader"
      v-bind="$props"
      @fileSuccess="fileSuccess"
      :type="type"
    />
    <photo-graph
      @closePhone="closeHandle"
      ref="photoGraph"
      v-if="photoGraphVis"
    />
    <Preview :visible.sync="previewVisible" :file="activeFile" />
  </div>
</template>

<script>
import { getDownloadUrl, removeFile } from "@/api/common";
import Preview from "./Preview";
import FileUploader from "./vue-simple-uploader/fileUploader";
import PhotoGraph from "./photoGraph/index.vue";
import define from "@/utils/define";
export default {
  name: "UploadFile",
  components: { Preview, FileUploader, PhotoGraph },
  props: {
    showIndex: {
      type: Number,
      default: -1,
    },
    value: {
      type: Array,
      default: () => [],
    },
    modular: {
      type: String,
      default: "system",
    },
    type: {
      type: String,
      default: "annex",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    showMessage: {
      type: Boolean,
      default: true,
    },
    showTip: {
      type: Boolean,
      default: false,
    },
    detailed: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: Number,
      default: 0,
    },
    accept: {
      type: String,
      default: "*",
    },
    buttonText: {
      type: String,
      default: "选择文件",
    },
    sizeUnit: {
      type: String,
      default: "MB",
    },
    fileSize: {
      default: 5,
    },
    // 是否隐藏上传按钮  默认不隐藏
    showUpload: {
      type: Boolean,
      default: true,
    },
    // 列表文件 控件是否变更颜色
    controlColor: {
      type: String,
      default: "#46a6ff",
    },
    //是否显示点击标题下载,删除下载
    showUploadBtn: {
      type: Boolean,
      default: true,
    },
    //是否显示高拍仪按钮
    showPdfBtn: {
      type: Boolean,
      default: false,
    },
    returnPlanTableIndex: {
      //return上传，获取的index
      type: Number,
      default: -1,
    },
    uploadId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      gaopaiLoading: false,
      fileList: this.value,
      previewVisible: false,
      activeFile: {},
      photoGraphVis: false,
      showPhotoBtn: false,
      showConfirmBtn: true,
      gaoPaiNumID: -1,
    };
  },
  computed: {
    acceptText() {
      let txt = "";
      switch (this.accept) {
        case "image/*":
          txt = "图片";
          break;
        case "video/*":
          txt = "视频";
          break;
        case "audio/*":
          txt = "音频";
          break;
        case ".xls,.xlsx":
          txt = "excel";
          break;
        case ".doc,.docx":
          txt = "word";
          break;
        case ".pdf":
          txt = "pdf";
          break;
        case ".txt":
          txt = "txt";
          break;
        default:
          txt = "";
          break;
      }
      return txt;
    },
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.fileList = val;
      },
    },
  },
  methods: {
    openLoading() {
      this.gaopaiLoading = true;
    },
    closeLoading() {
      this.gaopaiLoading = false;
    },
    openModel(file) {
      // if (this.fileList[this.showIndex]) {
      // console.log();
      this.activeFile = file;
      this.previewVisible = true;
    },
    createPDF() {
      // this.photoGraphVis = true;
      // this.$nextTick(() => {
      //   console.log("制作PDF中...");
      //   this.$refs.photoGraph.open();
      // });
      // 生成五位数识别码,后根据识别码进行获取数据
      this.gaoPaiNumID = (Math.random() * 100000).toFixed(0);
      // console.log(this.gaoPaiNumID);
      if (this.returnPlanTableIndex != -1) {
        this.$emit("createPdf", this.gaoPaiNumID, this.returnPlanTableIndex);
      } else {
        this.$emit("createPdf", this.gaoPaiNumID);
      }
    },
    closeHandle(isShow) {
      if (isShow) {
        this.showConfirmBtn = true;
        this.showPhotoBtn = false;
      } else {
        this.showConfirmBtn = false;
        this.showPhotoBtn = true;
      }
    },
    handleRemove(index) {
      const file = this.fileList[index];
      console.log("点击删除文件file", file);
      // 点击下载文件
      if (!file.fileId) return;
      removeFile(this.type, file.secondFilePath, file.fileId, file.name).then(
        (res) => {
          console.log("removeFile：", res);
        }
      );
      this.fileList.splice(index, 1);
      this.$emit("input", this.fileList);
      this.$emit("change", this.fileList);
    },
    handleClick(file) {
      console.log("点击下载文件file", file);
      // 点击下载文件
      if (!file.fileId) return;
      getDownloadUrl(
        this.type,
        file.secondFilePath,
        file.fileId,
        file.name
      ).then((res) => {
        // console.log("下载路径：" + res.data.url);
        this.jsbos.downloadFile(res.data.url + "&name=" + file.name);
      });
    },
    handlePreview(file, index) {
      console.log("点击预览文件file", file);
      this.activeFile = file;
      this.previewVisible = true;
    },
    uploadFile() {
      const isTopLimit = this.limit ? this.value.length >= this.limit : false;
      if (isTopLimit) {
        this.$message.error(`当前限制最多可以上传${this.limit}个文件`);
        return false;
      }
      this.$refs.fileUploader && this.$refs.fileUploader.openUploader();
    },
    fileSuccess(data) {
      console.log("fileSuccess", data);
      const isTopLimit = this.limit ? this.value.length >= this.limit : false;
      if (isTopLimit) {
        this.$message.error(`当前限制最多可以上传${this.limit}个文件`);
        return false;
      }
      this.fileList.push(data);
      this.$emit("input", this.fileList);
      this.$emit("change", this.fileList);
    },
  },
};
</script>
<style lang="scss" scoped>
.UploadFile-container {
  width: 100%;
  height: 100%;
  position: relative;

  .el-upload__tip {
    line-height: 1.2;
    color: #a5a5a5;
    margin-top: 5px;
  }
}

.el-upload-list__item {
  &.el-upload-list__item_detail:first-child {
    margin-top: 5px !important;
  }

  .el-upload-list__item-name {
    margin-right: 70px;
  }

  &:hover {
    .el-upload-list__item-status-label.disabled {
      display: block !important;
    }
  }

  .el-icon-download {
    display: inline-block;
    position: absolute;
    top: 5px;
    right: 25px;
    cursor: pointer;
    opacity: 0.75;
    color: #606266;
  }

  .el-icon-view {
    display: inline-block;
    position: absolute;
    top: 5px;
    right: 45px;
    cursor: pointer;
    opacity: 0.75;
    color: #606266;
  }
}
</style>
